{% extends "pos/base.html" %}
{% load humanize %}

{% block title %}V2 Sales Shop Map{% endblock %}

{% block content %}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<style>
  .map-page-wrap{
    padding: 16px;
  }

  .map-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }

  .map-title{
    font-size:22px;
    font-weight:800;
    color:#111827;
  }

  .map-sub{
    font-size:12px;
    color:#6b7280;
    margin-top:3px;
  }

  .map-grid{
    display:grid;
    grid-template-columns: 1.7fr 1fr;
    gap:14px;
  }

  .cardx{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    overflow:hidden;
  }

  .cardx-head{
    padding:12px 14px;
    border-bottom:1px solid #eef2f7;
    font-weight:700;
    color:#111827;
    background:#f9fafb;
  }

  .cardx-body{
    padding:14px;
  }

  #salesMap{
    height: 78vh;
    min-height: 520px;
    width:100%;
    border-radius:10px;
  }

  .stats{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
    margin-bottom:14px;
  }

  .stat{
    padding:10px 12px;
    border-radius:10px;
    color:#111827;
    background:#f9fafb;
    border:1px solid #e5e7eb;
  }

  .stat .k{
    font-size:11px;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .stat .v{
    font-size:20px;
    font-weight:800;
    margin-top:2px;
  }

  .v.green{ color:#15803d; }
  .v.red{ color:#dc2626; }
  .v.gray{ color:#6b7280; }
  .v.yellow{ color:#ca8a04; }

  .legend{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:12px;
    font-size:13px;
  }

  .legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    color:#374151;
  }

  .dot{
    width:12px;
    height:12px;
    border-radius:999px;
    display:inline-block;
  }

  .dot.shop{ background:#2563eb; }
  .dot.green{ background:#16a34a; }
  .dot.red{ background:#dc2626; }
  .dot.gray{ background:#6b7280; }
  .dot.yellow{ background:#ca8a04; }

  .side-list{
    max-height:78vh;
    overflow:auto;
  }

  .sale-item{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:10px;
    background:#fff;
  }

  .sale-item-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
  }

  .inv{
    font-weight:800;
    color:#111827;
  }

  .mini{
    color:#6b7280;
    font-size:12px;
  }

  .badgex{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
  }

  .badgex.green{ background:#dcfce7; color:#166534; }
  .badgex.red{ background:#fee2e2; color:#991b1b; }
  .badgex.gray{ background:#e5e7eb; color:#374151; }
  .badgex.yellow{ background:#fef3c7; color:#92400e; }

  .empty-note{
    text-align:center;
    color:#6b7280;
    padding:28px 12px;
  }

  @media (max-width: 991px){
    .map-grid{
      grid-template-columns:1fr;
    }

    #salesMap{
      height:56vh;
      min-height:420px;
    }

    .side-list{
      max-height:none;
    }

    .stats{
      grid-template-columns:repeat(2, 1fr);
    }
  }
</style>

<div class="container-fluid map-page-wrap">

  <div class="map-topbar">
    <div>
      <div class="map-title">V2 Android Sales Shop Map</div>
      <div class="map-sub">
        Blue = shop, Green = within 100m, Red = outside 100m, Gray = no sale location, Yellow = shop location missing
      </div>
    </div>

    <div>
      <a href="{% url 'pos_api_v2:offline:approvals:sale_approval_list' %}" class="btn btn-outline-primary btn-sm">
        Back to Sales Approval
      </a>
    </div>
  </div>

  <div class="stats">
    <div class="stat">
      <div class="k">Total</div>
      <div class="v">{{ stats.count }}</div>
    </div>
    <div class="stat">
      <div class="k">Within 100m</div>
      <div class="v green">{{ stats.green }}</div>
    </div>
    <div class="stat">
      <div class="k">Outside 100m</div>
      <div class="v red">{{ stats.red }}</div>
    </div>
    <div class="stat">
      <div class="k">No Sale Location</div>
      <div class="v gray">{{ stats.gray }}</div>
    </div>
    <div class="stat">
      <div class="k">Shop Missing</div>
      <div class="v yellow">{{ stats.yellow }}</div>
    </div>
  </div>

  <div class="map-grid">

    <div class="cardx">
      <div class="cardx-head">Map</div>
      <div class="cardx-body">

        <div class="legend">
          <div class="legend-item"><span class="dot shop"></span> Shop</div>
          <div class="legend-item"><span class="dot green"></span> Sale within 100m</div>
          <div class="legend-item"><span class="dot red"></span> Sale outside 100m</div>
          <div class="legend-item"><span class="dot gray"></span> Sale location not marked</div>
          <div class="legend-item"><span class="dot yellow"></span> Customer shop missing</div>
        </div>

        <div id="salesMap"></div>

      </div>
    </div>

    <div class="cardx">
      <div class="cardx-head">Mapped Sales</div>

      <div class="cardx-body side-list">
        {% if map_rows %}
          {% for r in map_rows %}
            <div class="sale-item" data-invoice="{{ r.invoice_no }}">
              <div class="sale-item-top">
                <div class="inv">#{{ r.invoice_no }}</div>
                <div>
                  {% if r.marker_color == 'green' %}
                    <span class="badgex green">{{ r.location_status }}</span>
                  {% elif r.marker_color == 'red' %}
                    <span class="badgex red">{{ r.location_status }}</span>
                  {% elif r.marker_color == 'yellow' %}
                    <span class="badgex yellow">{{ r.location_status }}</span>
                  {% else %}
                    <span class="badgex gray">{{ r.location_status }}</span>
                  {% endif %}
                </div>
              </div>

              <div><strong>{{ r.customer_name|default:"—" }}</strong></div>
              <div class="mini">Salesman: {{ r.salesman_name|default:"—" }}</div>

              {% if r.booker_name %}
                <div class="mini">Booker: {{ r.booker_name }}</div>
              {% else %}
                <div class="mini">Booker ID: {{ r.booker_id }}</div>
              {% endif %}

              <div class="mini">Date: {{ r.transaction_date|default:"—" }} {{ r.bill_time|default:"" }}</div>
              <div class="mini">Area ID: {{ r.area_id }}</div>
              <div class="mini">Total: {{ r.total_amount|floatformat:2|intcomma }} | Received: {{ r.amount_transaction|floatformat:2|intcomma }}</div>
              <div class="mini">Distance: {% if r.distance_m != None %}{{ r.distance_m }} m{% else %}—{% endif %}</div>
            </div>
          {% endfor %}
        {% else %}
          <div class="empty-note">No sales found for map.</div>
        {% endif %}
      </div>
    </div>

  </div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
(function(){
  var points = {{ map_points_json|safe }};

  var map = L.map('salesMap', {
    zoomControl: true
  }).setView([33.6844, 73.0479], 11);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; OpenStreetMap'
  }).addTo(map);

  if(!points || !points.length){
    return;
  }

  var bounds = [];
  var saleMarkers = {};

  function addBound(lat, lng){
    if(lat !== null && lng !== null && lat !== undefined && lng !== undefined){
      bounds.push([lat, lng]);
    }
  }

  function popupHtml(item){
    var distText = (item.distance_m !== null && item.distance_m !== undefined)
      ? (item.distance_m + ' m')
      : '—';

    return ''
      + '<div style="min-width:220px;">'
      +   '<div style="font-weight:800; margin-bottom:6px;">Invoice #' + item.invoice_no + '</div>'
      +   '<div><strong>Customer:</strong> ' + (item.customer_name || '—') + '</div>'
      +   '<div><strong>Salesman:</strong> ' + (item.salesman_name || '—') + '</div>'
      +   '<div><strong>Booker:</strong> ' + (item.booker_name || item.booker_id || '—') + '</div>'
      +   '<div><strong>Date:</strong> ' + (item.transaction_date || '—') + ' ' + (item.bill_time || '') + '</div>'
      +   '<div><strong>Area ID:</strong> ' + item.area_id + '</div>'
      +   '<div><strong>Status:</strong> ' + item.location_status + '</div>'
      +   '<div><strong>Distance:</strong> ' + distText + '</div>'
      +   '<div><strong>Total:</strong> ' + item.total_amount + '</div>'
      +   '<div><strong>Received:</strong> ' + item.amount_transaction + '</div>'
      + '</div>';
  }

  points.forEach(function(item){
    var saleLat = item.sale_lat;
    var saleLng = item.sale_lng;
    var shopLat = item.shop_lat;
    var shopLng = item.shop_lng;

    if(shopLat !== null && shopLng !== null){
      var shopMarker = L.circleMarker([shopLat, shopLng], {
        radius: 7,
        color: '#1d4ed8',
        weight: 2,
        fillColor: '#60a5fa',
        fillOpacity: 0.95
      }).addTo(map);

      shopMarker.bindPopup(
        '<div style="min-width:200px;">'
        + '<div style="font-weight:800; margin-bottom:6px;">Shop Location</div>'
        + '<div><strong>Invoice:</strong> #' + item.invoice_no + '</div>'
        + '<div><strong>Customer:</strong> ' + (item.customer_name || '—') + '</div>'
        + '<div><strong>Area ID:</strong> ' + item.area_id + '</div>'
        + '<div><strong>Booker:</strong> ' + (item.booker_name || item.booker_id || '—') + '</div>'
        + '</div>'
      );

      L.circle([shopLat, shopLng], {
        radius: 100,
        color: '#2563eb',
        weight: 1,
        fillColor: '#93c5fd',
        fillOpacity: 0.10
      }).addTo(map);

      addBound(shopLat, shopLng);
    }

    if(saleLat !== null && saleLng !== null){
      var color = '#6b7280';

      if(item.marker_color === 'green'){
        color = '#16a34a';
      }else if(item.marker_color === 'red'){
        color = '#dc2626';
      }else if(item.marker_color === 'yellow'){
        color = '#ca8a04';
      }

      var saleMarker = L.circleMarker([saleLat, saleLng], {
        radius: 8,
        color: color,
        weight: 2,
        fillColor: color,
        fillOpacity: 0.95
      }).addTo(map);

      saleMarker.bindPopup(popupHtml(item));
      saleMarkers[item.invoice_no] = saleMarker;

      addBound(saleLat, saleLng);

      if(shopLat !== null && shopLng !== null){
        L.polyline([[shopLat, shopLng], [saleLat, saleLng]], {
          color: color,
          weight: 2,
          opacity: 0.75,
          dashArray: '5,5'
        }).addTo(map);
      }
    }
  });

  if(bounds.length === 1){
    map.setView(bounds[0], 17);
  }else if(bounds.length > 1){
    map.fitBounds(bounds, {padding:[30, 30]});
  }

  document.querySelectorAll('.sale-item').forEach(function(card){
    card.style.cursor = 'pointer';

    card.addEventListener('click', function(){
      var invoiceNo = parseInt(this.getAttribute('data-invoice') || '0', 10);
      var marker = saleMarkers[invoiceNo];

      if(marker){
        map.setView(marker.getLatLng(), 18);
        marker.openPopup();
      }
    });
  });

})();
</script>

{% endblock %}